<template>

  <div class="article-list">
    <el-row :gutter="20">
      <el-col :span="24" v-for="(article, index) in articles" :key="index" class="article-card">
        <el-card shadow="hover">
          <div class="blog-box">
            <div style="flex: 1; width: 0;">
              <div class="blog-title" @click="$router.push('/front/blog/' + article.tid)">{{article.title}}</div>
              <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 14px;">{{article.description}}</div>
              <div style="display: flex;">
                <div style="flex: 1; font-size: 13px;">
                  <span style="color: #666; margin-right: 20px;"><i class="el-icon-user">{{article.author}}</i></span>
                  <span style="color: #666; margin-right: 20px;"><i class="el-icon-view">{{ article.likes }}</i></span>
                  <span style="color: #666;"><i class="el-icon-s-opportunity">{{article.comments}}</i></span>
                </div>
                <div style="width: fit-content">
                  <el-tag v-for="(tag, tagIndex) in article.tags" :key="tagIndex" type="info">{{ tag }}</el-tag>
                </div>
              </div>
            </div>
            <div style="width: 140px; margin-top: 15px">
              <img style="width: 100%; height: 80px; border-radius: 5px;" :src= "article.image" alt="加载失败">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页组件 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="50"
        :page-size="5"
        class="pagination"
    />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'ArticleList',
  data() {
    return {
      articles: [
        {
          tid: 1,
          title: 'springboot中的数据连接池配置',
          description: '类似线程池，也是一个容器，负责分配和管理数据库连接池...',
          author: '燃神',
          likes: 55,
          comments: 100,
          tags: ['spring', '连接池'],
          image: ''
        },
        {
          tid:2,
          title: 'SQL中的视图',
          description: '视图就是虚表，视图的存储结构中并没有数据，只有结构...',
          author: '倔神',
          likes: 55,
          comments: 66,
          tags: ['SQL', '视图'],
          image: ''
        },
        {
          tid: 3,
          title: '[安静]电影《垫盘斩》',
          description: '这部影片充满戏剧张力...',
          author: '良影',
          likes: 2,
          comments: 0,
          tags: ['新闻'],
          image: ''
        },
        {
          tid: 4,
          title: 'AI科普 | 什么是人工智能的本质？',
          description: '从科普的角度深入探讨AI的本质...',
          author: '知性不是文生',
          likes: 23,
          comments: 11,
          tags: ['AI', '人工智能'],
          image: ''
        },
        {
          tid: 5,
          title: '英特尔股价今年暴跌近 60%，或被道琼斯指数除名',
          description: '芯片巨头英特尔因业绩问题面临风险...',
          author: '远洋',
          likes: 1000,
          comments: 77,
          tags: ['英特尔', '金融'],
          image: ''
        }
      ]
    };
  },
  methods: {
    async fetchArticles() {
      let url = '/api/post/getList';
      try {
        // 发起 GET 请求到后端的 /api/post/getList 接口
        axios.get(url, {
          headers: { token: this.token}
        }).then(response => {
          if (response && response.data) {
            this.articles = response.data.data;
          } else {
            console.error('Invalid response format');
          }
        });
        console.log(this.articles);

        // 如果数据结构不同，需要根据实际结构进行调整
      } catch (error) {
        console.error("Error fetching articles:", error);
      }
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
      this.fetchArticles();
    }
  },
};
</script>

<style scoped>
.article-list {
  padding: 20px;
}
.article-card {
  margin-bottom: 10px;
}

.image-container img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}
.pagination {
  text-align: center;
  margin-top: 20px;
}
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.blog-box{
  display: flex;
  grid-gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #666666;
}
.blog-box:first-child{
  padding-top: 0;
}
.blog-title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}
.blog-title:hover{
  color: #2a60c9;
}
</style>